<template>
  <div class="jlf-taskinfolist">
    <ul class="jlf-module-list ">
      <li class="jlf-module-list-item" v-for="(item, index) in data" :key="index" @click="onClick(item)">
        <div class="jlf-taskinfolist__header" v-if="item.title || status">
          <div class="jlf-taskinfolist__header__name">{{item.title}}</div>
          <div class="jlf-taskinfolist__header__state" v-if="status">
            <span class="color1" v-if="status==1">待处理</span>
            <span class="color2" v-else-if="status==2">已完成</span>
            <span class="color3" v-else-if="status==3">未完成</span>
          </div>
        </div>
        <div class="jlf-taskinfolist__numberlist">
          <div class="jlf-taskinfolist__numberlist__item" v-if="item.inspectionObjectTotal">
            <p class="jlf-taskinfolist__numberlist__number color1">{{item.inspectionObjectTotal}}</p>
            <p class="jlf-taskinfolist__numberlist__text ">{{ numberName[0] }}</p>
          </div>
          <div class="jlf-taskinfolist__numberlist__item" v-if="item.inspectedCompletedTotal">
            <p class="jlf-taskinfolist__numberlist__number color2">{{item.inspectedCompletedTotal}}</p>
            <p class="jlf-taskinfolist__numberlist__text ">{{ numberName[1] }}</p>
          </div>
          <div class="jlf-taskinfolist__numberlist__item" v-if="item.inspectCompletedTotal">
            <p class="jlf-taskinfolist__numberlist__number color3">{{item.inspectCompletedTotal}}</p>
            <p class="jlf-taskinfolist__numberlist__text ">{{ numberName[2] }}</p>
          </div>
        </div>
        <div class="jlf-taskinfolist__infolist" >
          <div class="jlf-taskinfolist__infolist__item" v-if="item.code && infoName[0]" >
            <p class="jlf-taskinfolist__infolist__title"> {{ infoName[0] }}：</p>
            <p class="jlf-taskinfolist__infolist__text">{{ item.code }}</p>
          </div>
          <div class="jlf-taskinfolist__infolist__item"  v-if="item.taskTypeName && infoName[1]">
            <p class="jlf-taskinfolist__infolist__title">{{ infoName[1] }}：</p>
            <p class="jlf-taskinfolist__infolist__text">{{ item.taskTypeName }}</p>
          </div>
          <div class="jlf-taskinfolist__infolist__item"  v-if="item.cycleStartTime && item.cycleEndTime && infoName[2] ">
            <p class="jlf-taskinfolist__infolist__title">{{ infoName[2] }}：</p>
            <p class="jlf-taskinfolist__infolist__text">{{ gettaskdate(item.cycleStartTime,item.cycleEndTime) }}</p>
          </div>
          <div class="jlf-taskinfolist__infolist__item"  v-if="item.cyclecompletenum && item.cycleNumber && infoName[3]">
            <p class="jlf-taskinfolist__infolist__title">{{ infoName[3] }}：</p>
            <p class="jlf-taskinfolist__infolist__text">
              <span v-if="item.executionRateName"> {{item.executionRateName}} </span>
              <span>【已完成 <span class="color1 font18">{{item.cyclecompletenum}} </span> 次，未完成 <span class="color3 font18">{{ showNoComplete(item)}}</span> 次】</span>
            </p>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import moment from 'moment'
export default {
  name: 'MTaskInfoList',
  props: {
    status: [String, Number],
    numberName: {
      type: Array,
      default: () => {
        return ['巡查对象数','已巡查数','未巡查数']
      }
    },
    infoName: {
      type: Array,
      default: () => {
        return ['任务编码','任务类型','任务周期', '执行频率']
      }
    },
    data: {
      type: Array,
      default: function(){
        return []
      },
      required: true
    }
  },
  methods: {
    onClick(item) {
      let that = this
      that.$emit('onClick',item)
    },
    gettaskdate(begindate,endate){
      return moment(begindate).format('YYYY/MM/DD')+ '-'+moment(endate).format('YYYY/MM/DD')
    },
    showNoComplete(item){
      return item.cycleNumber- item.cyclecompletenum
    }
  }
}
</script>
